<template>
  <el-drawer :close-on-press-escape='false' :show-close='false'
      @closed='closed' :visible.sync='isOpen' v-model="isOpen" size="33%">
    <div class="wrap">
      <div class="title">
        <i :class="['i', icon]"/>
        <span class="span">{{title}}</span>
        <i @click="closeDrawer" class="close el-icon-circle-close"/>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </el-drawer>
</template>

<script>

export default {
  name: 'PageDrawer',
  props: ['open', 'title', 'icon'],
  data: () => {
    return {
      isOpen: false
    }
  },
  model: {
    prop: 'open',
    event: 'change'
  },
  methods: {
    closed () {
      this.$emit('change', false)
    },
    closeDrawer () {
      this.isOpen = false
    }
  },
  watch: {
    open: function (val) {
      this.isOpen = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    width: 100%;
    height: calc(100% + 52px);
    margin-top: -52px;
    padding-top: 52px;
    background-image: url('../../../assets/img/pattern2.png');
    background-repeat: repeat;
    background-position-y: 30px;

    .title{
      display: block;
      width: 100%;
      height: 80px;
      position: relative;
      margin: 0 35px 15px;
      padding-top: 30px;

      .i{
        display: block;
        width: 56px;
        height: 56px;
        font-size: 56px;
        line-height: 56px;
        color: black;
        font-weight: 800;
        position: absolute;
        top: 0;
        left: 0;
      }

      .span{
        display: block;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        color: black;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        margin-top: 56px;
        margin-left: 56px;
        user-select: none;
      }

      .close{
        display: block;
        width: 40px;
        height: 40px;
        margin-top: 20px;
        position: absolute;
        top: 0;
        right: 60px;
        font-size: 40px;
        line-height: 40px;
        cursor: pointer;
      }

      .close:hover{
        color: red;
        transform: color 1s;
      }

    }

    .content{
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
</style>
